<template>
  <div class="overview">
    <a-page-header
      title="采购管理"
      sub-title="采购业务流程管理中心"
    />
    
    <!-- 统计卡片 -->
    <a-row :gutter="16" style="margin-bottom: 24px;">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="待处理采购单"
            :value="23"
            suffix="单"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <ExclamationCircleOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="本月采购金额"
            :value="1234567"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <DollarOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="待收货订单"
            :value="15"
            suffix="单"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <InboxOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="活跃供应商"
            :value="45"
            suffix="家"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <TeamOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <!-- 功能导航 -->
    <a-row :gutter="16">
      <a-col :span="6" v-for="item in functionItems" :key="item.key">
        <a-card hoverable @click="navigateTo(item.path)" class="function-card">
          <template #cover>
            <div class="card-cover">
              <component :is="item.icon" style="font-size: 48px; color: #1890ff;" />
            </div>
          </template>
          <a-card-meta :title="item.title" :description="item.description" />
        </a-card>
      </a-col>
    </a-row>

    <!-- 待办事项 -->
    <a-card title="待办事项" style="margin-top: 24px;">
      <a-list
        :data-source="todoItems"
        item-layout="horizontal"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <template #actions>
              <a-button type="link" size="small">处理</a-button>
            </template>
            <a-list-item-meta
              :title="item.title"
              :description="item.description"
            >
              <template #avatar>
                <a-badge :status="item.status" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  ExclamationCircleOutlined,
  DollarOutlined,
  InboxOutlined,
  TeamOutlined,
  ShoppingCartOutlined,
  CalendarOutlined,
  FileTextOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()

const functionItems = ref([
  {
    key: 'purchase-orders',
    title: '采购订单',
    description: '采购订单管理和跟踪',
    icon: ShoppingCartOutlined,
    path: '/purchase-orders'
  },
  {
    key: 'purchase-plans',
    title: '采购计划',
    description: '制定和管理采购计划',
    icon: CalendarOutlined,
    path: '/purchase-plans'
  },
  {
    key: 'supplier-quotes',
    title: '供应商报价',
    description: '供应商报价比较和管理',
    icon: FileTextOutlined,
    path: '/supplier-quotes'
  },
  {
    key: 'receiving',
    title: '收货管理',
    description: '采购商品收货确认',
    icon: CheckCircleOutlined,
    path: '/receiving'
  }
])

const todoItems = ref([
  {
    title: '采购订单 PO202401001 待审批',
    description: '供应商：新鲜果业有限公司，金额：¥12,500',
    status: 'error'
  },
  {
    title: '采购计划 PC202401002 待执行',
    description: '计划采购时间：2024-01-20，预算：¥50,000',
    status: 'warning'
  },
  {
    title: '收货单 RC202401003 待确认',
    description: '供应商：优质蔬菜供应商，到货时间：今天 14:30',
    status: 'processing'
  }
])

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.overview {
  padding: 24px;
}

.card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f5f5f5;
}

.function-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.function-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>